<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>=^.^=</title>
<style>
canvas{
	display: block;
	cursor: all-scroll;
}
button{
	font-size: 20px;
	padding: 10px;
}
</style>
</head>
<body>
<button type="button" id="button">load 1.2MB</button>

<script src="three.min.js"></script>
<script src="./libs/OrbitControls.js"></script>
<script src="./libs/draco_decoder.js"></script>
<script src="./libs/DRACOLoader.js"></script>
<script src="../dist/ZipLoader.js"></script>
<script>
// START three.js init ---
var width  = 500;
var height = 500;
var clock = new THREE.Clock();

var scene  = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 60, width / height, 0.001, 10 );
camera.position.set( 0, 0, 4 );
var renderer = new THREE.WebGLRenderer( { antialias: true, stencil: false } );
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );

var controls = new THREE.OrbitControls( camera, renderer.domElement );

scene.add(
	new THREE.HemisphereLight( 0x443333, 0x332222 ),
	new THREE.AmbientLight( 0xeeeeee )
);

( function anim () {

	controls.update();
	requestAnimationFrame( anim );
	renderer.render( scene, camera );

} )();
// END three.js init ---




var loader = new ZipLoader( './rameses.zip' );
var button = document.getElementById( 'button' );

// on progress
loader.on( 'progress', function ( e ) {

	button.innerHTML = ( ( e.loaded / e.total * 100 ) | 0 ) + '%';
	console.log( 'loading', e.loaded / e.total * 100 + '%' );

} );

// on load
loader.on( 'load', function ( e ) {

	var drcBuffer  = loader.files[ 'rameses/rameses.drc' ].buffer;
	var textureUrl = loader.extractAsBlobUrl( 'rameses/rameses.jpg', 'image/jpeg' );
	var hdriUrl    = loader.extractAsBlobUrl( 'rameses/hdri.jpg', 'image/jpeg' );

	const envMap = new THREE.Texture();
	envMap.image = new Image();
	envMap.image.onload = function () { envMap.needsUpdate = true; };
	envMap.image.src = hdriUrl;
	envMap.format = THREE.RGBFormat;
	envMap.mapping = THREE.SphericalReflectionMapping;

	const diffuseMap = new THREE.Texture();
	diffuseMap.image = new Image();
	diffuseMap.image.onload = function () { diffuseMap.needsUpdate = true; };
	diffuseMap.image.src = textureUrl;
	diffuseMap.format = THREE.RGBFormat;

	const material = new THREE.MeshStandardMaterial( {
		color: 0xffffff,
		metalness: 0.0,
		roughness: 0.7,
		map: diffuseMap,
		envMap: envMap
	} );

	const dracoLoader = new THREE.DRACOLoader();
	const bufferGeometry = dracoLoader.decodeDracoFile( drcBuffer );

	var mesh = new THREE.Mesh( bufferGeometry, material );
	scene.add( mesh );

	loader.clear( 'rameses/rameses.drc' );

} );


// on button click
button.addEventListener( 'click', function ( e ) {

	loader.load();
	e.target.disabled = true;

} );
</script>

</body>
</html>
